<!-- #layout name=default -->
<style>
  table.table .field-head .hover-hide,
  table.table tfoot .hover-hide,
  table.table tbody .field-control .hover-hide,
  table.table:hover .field-head .hover-show,
  table.table:hover tfoot .hover-show,
  table.table:hover tbody .field-control .hover-show {
    display: table-cell;
  }

  table.table .field-head .hover-show,
  table.table tfoot .hover-show,
  table.table tbody .field-control .hover-show,
  table.table:hover .field-head .hover-hide,
  table.table:hover tfoot .hover-hide,
  table.table:hover tbody .field-control .hover-hide {
    display: none;
  }

  tbody .field-control td {
    height: 33px;
  }
</style>
<div id="main" class="fixed" v-cloak>
  <div class="block-fullpage with-buttons" style="bottom:0;top:46px;">
    <div class="block-visual-editor default">
      <div class="tabs-bottom" style="padding-bottom: 53px;">
        <div class="tab-content">
          <section class="tab-pane active">
            <div class="kb-editor" style="overflow-x: hidden; overflow-y: auto;" :class="{ 'full-size': isPanelHidden }">
              <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
                <div class="form-group clearfix">
                  <kb-multilang-selector v-if="!isMultiContent && contentMode == 'normal' && siteLangs" :cultures="siteLangs.cultures" :default-culture="siteLangs.default">
                  </kb-multilang-selector>
                </div>
              </div>
              <div class="container-fluid" v-show="contentMode == 'fieldRequired'">
                <div class="col-md-10 col-md-offset-1" style="margin-top: 60px;">
                  <div class="jumbotron kb-hint">
                    <h2>Continue</h2>
                    <p>Click the "New field" below to create first content field for your content type.</p>
                    <p>
                      <a class="btn blue" href="javascript:;" @click="onCreateField">New field</a>
                    </p>
                  </div>
                </div>
              </div>
              <div class="container-fluid" v-show="contentMode == 'folderRequired'">
                <div class="col-md-10 col-md-offset-1" style="margin-top: 60px;">
                  <div class="jumbotron kb-hint">
                    <h2>Continue</h2>
                    <p>Click the "New folder" below to create a folder saving this type of contents.</p>
                    <p>
                      <a class="btn blue" href="javascript:;" @click="onCreateFolder">New folder</a>
                    </p>
                  </div>
                </div>
              </div>
              <div v-show="contentMode == 'normal'" class="col-md-11 margin-bottom-25 form-horizontal" style="padding-top: 20px;">
                <kb-field-panel ref="fieldPanel" :fields="fields" :categories="categories" :embedded="embedded" :values.sync="contentValues"
                  :site-langs="siteLangs" @media-dialog-data="mediaDialogData=$event"></kb-field-panel>
              </div>
              <div class="container-fluid" v-show="contentMode == 'contentTypeRequired'">
                <div class="col-md-10 col-md-offset-1" style="margin-top:100px;">
                  <div class="jumbotron kb-hint">
                    <h2>Create your content</h2>
                    <p>Currently you don't have content type yet. You can click button below to continue.</p>
                    <p>
                      <a class="btn blue" href="javascript:;" @click="createContentType">Create a type</a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="kb-panel-gripper-container" v-show="!isMultiContent" :class="{'panel-hidden': isPanelHidden }">
              <a href="javascript:;" class="kb-panel-gripper hidden-xs" @click="togglePanel">
                <i :class="isPanelHidden ? 'fa-caret-left' : 'fa-caret-right'" class="fa"></i>
              </a>
              <div class="kb-panel">
                <div class="panel-body">
                  <div class="form-group">
                    <label class="control-label">Content type</label>
                    <div :class="{ 'form-inline': !hasFolder }">
                      <select :value="contentType" :disabled="hasFolder" :class="{'input-large': !hasFolder}" @change="contentTypeChanged" class="form-control">
                        <option v-for="item in contentTypes" :value="item.id">
                          {{ item.name }}
                        </option>
                      </select>
                      <button v-if="!hasFolder" class="btn btn-default pull-right" v-kb-tooltip="Kooboo.text.common.add" @click="createContentType">
                        <i class="fa fa-plus"></i>
                      </button>
                    </div>
                    <span v-if="!contentType" class="help-block">Create a new content type to continue.</span>
                  </div>

                  <div v-if="contentType" class="form-group margin-bottom-25" v-show="!allowModify">
                    <button class="btn btn-default btn-block" @click="onAllowModify">Edit content type</button>
                  </div>

                  <div class="form-group" v-kb-collapsein="allowModify">
                    <table class="table table-hover table-condensed">
                      <thead>
                        <tr class="field-head">
                          <th class="table-sortable"></th>
                          <th>Name</th>
                          <th>Display</th>
                          <th class="table-action hover-hide">Multilingual</th>
                          <th class="table-action hover-hide">Summary field</th>
                          <th class="table-action hover-hide">Editable</th>
                          <th colspan="3" class="table-action hover-show"></th>
                        </tr>
                      </thead>
                      <tbody v-kb-sortable="userTypeProperties" @after-sort="afterSortProperty">
                        <tr v-for="($data, $index) in userTypeProperties" class="field-control" :key="$data.name">
                          <td class="table-sortable">
                            <span v-if="!isMultiContent" class="sortable">
                              <i class="glyphicon glyphicon-list"></i>
                            </span>
                          </td>
                          <td :title="$data.name">{{ $data.name | ellipsis(7) }}</td>
                          <td :title="$data.displayName">{{ $data.displayName | ellipsis(7) }}</td>
                          <td class="table-action hover-hide">
                            <span :class="$data.multipleLanguage ? 'green' : 'label-default'" class="label label-sm pull-right">{{ Kooboo.text.common[ $data.multipleLanguage ? "yes" : "no" ] }}</span>
                          </td>
                          <td class="table-action hover-hide">
                            <span :class="$data.isSummaryField ? 'green' : 'label-default'" class="label label-sm pull-right">{{ Kooboo.text.common[ $data.isSummaryField ? "yes" : "no" ] }}</span>
                          </td>
                          <td class="table-action hover-hide">
                            <span :class="$data.editable ? 'green' : 'label-default'" class="label label-sm pull-right">{{ Kooboo.text.common[ $data.editable ? "yes" : "no" ] }}</span>
                          </td>
                          <td class="table-action hover-show"></td>
                          <td class="table-action hover-show">
                            <a class="btn btn-xs blue" @click="editProperty($data, $index,false)" v-kb-tooltip="Kooboo.text.common.edit">
                              <i class="fa fa-pencil"></i>
                            </a>
                          </td>
                          <td class="table-action hover-show">
                            <a v-if="!$data.isSystemField" class="btn btn-xs red" @click="deleteProperty($data)" v-kb-tooltip="Kooboo.text.common.delete">
                              <i class="fa fa-close"></i>
                            </a>

                            <a v-else class="btn btn-xs red disabled" disabled v-kb-tooltip="Kooboo.text.site.contentType.systemFieldUndeletable">
                              <i class="fa fa-close"></i>
                            </a>
                          </td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr class="action-row">
                          <td colspan="100" v-kb-tooltip:left="Kooboo.text.site.contentType.showSystemField">
                            <a href="javascript:;" @click="toggleAllFields" style="padding-top:0; padding-bottom:0;">
                              <i class="fa" :class="allFieldsShow ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                            </a>
                          </td>
                        </tr>

                        <template v-if="allFieldsShow">
                          <tr v-for="($data, $index) in systemTypeProperties" class="field-control" :key="$data.name">
                            <td class="table-sortable"></td>
                            <td>{{ $data.name | ellipsis }}</td>
                            <td>{{ $data.displayName | ellipsis }}</td>
                            <td class="table-action hover-hide">
                              <span :class="$data.multipleLanguage ? 'green' : 'label-default'" class="label label-sm pull-right">{{ Kooboo.text.common[ $data.multipleLanguage ? "yes" : "no" ] }}</span>
                            </td>
                            <td class="table-action hover-hide">
                              <span :class="$data.isSummaryField ? 'green' : 'label-default'" class="label label-sm pull-right">{{ Kooboo.text.common[ $data.isSummaryField ? "yes" : "no" ] }}</span>
                            </td>
                            <td class="table-action hover-hide">
                              <span :class="$data.editable ? 'green' : 'label-default'" class="label label-sm pull-right">{{ Kooboo.text.common[ $data.editable ? "yes" : "no" ] }}</span>
                            </td>
                            <td class="table-action hover-show" colspan="2"></td>
                            <td class="table-action hover-show">
                              <a class="btn btn-xs blue" @click="editProperty($data, $index,true)" v-kb-tooltip="Kooboo.text.common.edit">
                                <i class="fa fa-pencil"></i>
                              </a>
                            </td>
                          </tr>
                        </template>
                      </tfoot>
                    </table>
                    <button v-if="!isMultiContent && ['normal','fieldRequired'].indexOf(contentMode) > -1" class="btn btn-block blue margin-bottom-25"
                      @click="onCreateField">
                      <i class="fa fa-plus"></i>
                      <span>New field</span>
                    </button>
                  </div>
                  <div class="form-group">
                    <hr />
                  </div>
                  <div class="form-group">
                    <label class="control-label" for="">Save to folder</label>
                    <template v-if="!hasFolder">
                      <div v-if="avaliableFolders.length" class="form-inline">
                        <select v-model="choosedFolderId" @change.prevent="refreshContent" class="form-control input-large">
                          <option v-for="item in avaliableFolders" :value="item.id">{{ item.displayName }}</option>
                        </select>
                        <button class="btn btn-default pull-right" @click="onCreateFolder" v-kb-tooltip="Kooboo.text.common.add">
                          <i class="fa fa-plus"></i>
                        </button>
                      </div>
                      <p v-else class="form-control-static">No folder</p>
                    </template>
                    <p v-else class="form-control-static" style="word-break: break-all;">{{ choosedFolder.displayName }}</p>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" v-kb-modal="showContentTypeModal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onContentTypeModalHide">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">Content Type</h4>
        </div>
        <div class="modal-body">
          <kb-form :model="contentTypeForm" :rules="contentTypeRules" ref="contentTypeForm">
            <kb-form-item prop="name">
              <label class="col-md-3 control-label">Type name</label>
              <div class="col-md-9">
                <input type="text" v-model="contentTypeForm.name" class="form-control" @keydown.enter="onCreateNewContentType" />
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onCreateNewContentType">Save</button>
          <button class="btn gray" @click="onContentTypeModalHide">Cancel</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" v-kb-modal="showFolderModal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onHideFolderModal">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">New Folder</h4>
        </div>
        <div class="modal-body">
          <kb-form :model="newFolder" :rules="newFolderRules" ref="newFolderForm">
            <kb-form-item prop="name">
              <label class="control-label col-md-3">Name</label>
              <div class="col-md-9">
                <input type="text" class="form-control" v-model="newFolder.name" />
              </div>
            </kb-form-item>
            <kb-form-item prop="displayName">
              <label class="control-label col-md-3">Display name</label>
              <div class="col-md-9">
                <input type="text" class="form-control" v-model="newFolder.displayName" />
              </div>
            </kb-form-item>
            <kb-form-item prop="contentTypeId">
              <label class="control-label col-md-3">Content type</label>
              <div class="col-md-9">
                <select class="form-control" v-model="newFolder.contentTypeId">
                  <option value="">{{ Kooboo.text.component.folderEditor.chooseItemBelow }}
                  </option>
                  <option v-for="item in contentTypes" :value="item.id">{{ item.name }}</option>
                </select>
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onCreateNewFolder">Save</button>
          <button class="btn gray" @click="onHideFolderModal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
  <div class="page-buttons">
    <template v-if="isNewContent">
      <a href="javascript:;" class="btn green" @click="onContentSaveAndCreate">Save &amp; Create</a>
      <a href="javascript:;" class="btn green" @click="onContentSaveAndReturn">Save</a>
    </template>
    <template v-else>
      <a href="javascript:;" class="btn green" @click="onContentSave">Save</a>
      <a href="javascript:;" class="btn green" @click="onContentSaveAndReturn">Save &amp; Return</a>
    </template>
    <a href="javascript:;" class="btn gray" @click="userCancel">Return</a>
  </div>
  <div class="modal fade" data-backdrop="static" data-keyboard="false" v-kb-modal="onFieldModalShow">
    <kb-field-editor v-if="onFieldModalShow" @on-save="onFieldSave" :data="fieldData" :options="fieldEditorOptions" :close-handle="onFieldEditorClose"
      :all-items="typeProperties" :editing-index="editingFieldIndex"></kb-field-editor>
  </div>
  <kb-media-dialog :data.sync="mediaDialogData"></kb-media-dialog>
</div>
<script>
  window.__gl = {};
  Kooboo.viewEditor = {
    component: {}
  };
</script>
<script>
  (function () {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbMultilangSelector.js",
      "/_Admin/Scripts/components/kbFieldPanel.js",
      "/_Admin/Scripts/components/kbFieldEditor.js",
      "/_Admin/Scripts/lib/jquery-ui-customized.js",
      "/_Admin/Scripts/kooboo/Guid.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Contents/Content.js"></script>